<template>
  <div class="c_contentt">
    <!-- <navTop :headTitle="headTitle" :showBack="showBack" :bkParam="bkParam" :showAdd="showAdd"></navTop> -->
    <!-- <div class="c_contentt"> -->


    <div style="position: fixed;
    z-index: 566;
    background: #fff;
    width: 100%;
    top: 0;"
    >
      <div style="padding: .5rem;">
        <div class="c_patient_img">
          <span v-show="showaveter == 'S'">
            <img :src="this.doctorInfo.DOCTORIMAGEPATH | showHeadPic"/>
          </span>
        </div>
        <div class="c_patient">
          <p class="c_patient_p">{{this.doctorInfo.DOCTORNAME}}</p>
          <p class="c_patient_p1">科室：{{this.doctorInfo.DOCTORDEPARTMENT || "-"}}</p>
        </div>
        <div class="c_patient_info"><!-- 
          <p>{{this.patientInfo.PATIENT_NAME}}</p> -->
          <p v-if="urlType == 'mbMsg_gz'" @click="$router.push('/')">返回首页</p>
        </div>
      </div>

      <section class="c_nav">
        <div @click.stop="getDayActivitiesClick(false)"><span @click="changeShowType='liuyan'" :class="{c_nav_active: changeShowType =='liuyan'}">留言</span></div>
        <div @click.stop="getyaofangClick(false)"><span @click="changeShowType='bingli'" :class="{c_nav_active: changeShowType =='bingli'}">处方</span></div>
      </section>

    </div>

    <transition>
      <section class="bingli" v-show="changeShowType =='bingli'" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy"
        infinite-scroll-distance="10"
      >
        <!-- @click="goDetail(item)" -->
        <div class="bingli_con" v-for="(item,index) in list1"
          :key="index" :class="{ischeckmedic:item.ACNO==checkACNO}"
        >
          <prelist-option :selected="100" :itemjson="JSON.stringify(item)" @deletePayF="deletePay($event)" @queren="queren($event)"></prelist-option>
        </div>
        <p class="loadingT">{{loadingText}}</p>
      </section>
    </transition>


    <transition>
      <section class="liuyan" v-show="changeShowType =='liuyan'"
         v-infinite-scroll="loadMoreLm" 
         infinite-scroll-disabled="busyLm"
        infinite-scroll-distance="10"
        >
          <div v-for="item in list" :key="item.id" :class="{doctorposition:item.WHOSE==1,patientposition:item.WHOSE==2}">
            <p :class="{patient:item.WHOSE==1,doctor:item.WHOSE==2}"><span class="liuyan_time">{{item.LEAVETIME}}</span>{{item.NAME}}：{{item.LEAVEMESSAGE}}</p>
          </div>
          <div v-show="list.length <= 0" class="loadingTLm">{{loadingTextLm}}</div>


        <section class="huifu">
          <input type="text" placeholder="请输入回复内容" class="inputMessage" v-model="inputValue">
          <button type="submit" class="buttonMessage" @click="submitLiuyan">回复</button>
        </section>


      </section>
    </transition>
    <backTop></backTop>
  </div>
</template>
<script>
/* import navTop from '~/components/common/navTop.vue'; */
import prelistOption from '~/components/list/components/prelist_option';
import backTop from '~/components/common/backTop.vue';

const { config } = window;

export default {
  components: {
    /* navTop, */
    backTop, prelistOption,
  },
  data() {
    return {
      recordKey: '', // 查看时用的关键字
      showaveter: `${config.SHOWAEVTER}`,
      flag: 0,
      acno: '',
      /* headTitle: '医生留言', */
      changeShowType: 'liuyan',
      list: [],
      list1: [],
      role: '',
      inputValue: '',
      ts: this.newStore(),
      tq: this.getData(),
      checkACNO: '',
      page: 1,
      lmpage: 1,
      loadingText: '',
      loadingTextLm: '',
      busy: true,
      busyLm: true,
      isFold: [],
      doctorInfo: {},
      patientInfo: {},
      docList: [],
      urlType: '',
    };
  },
  created() {
    document.title = '医生留言';
    
    console.log('--------------- 初始化医生信息 患者信息----------------------');
    // alert('doc: ' + this.$route.query.jsonParams);
    // alert('pat: ' + localStorage.getItem("userInfo."+config.LT));
    // alert('urlType: ' + this.$route.query.urlType);

    this.patientInfo=JSON.parse(localStorage.getItem("userInfo."+config.LT));
    this.doctorInfo = JSON.parse(this.$route.query.jsonParams);
    this.urlType = this.$route.query.urlType;
  },
  mounted() {
    this.getDayActivitiesClick(false);
  },
  destroyed() {
  },
  updated() {
    this.$nextTick(() => {
      const liuyan = this.$el.querySelector('.liuyan');
      liuyan.scrollTop = liuyan.scrollHeight;
    });
  },
  filters: {
    showHeadPic(value) {
      if (!value || value == '' || value == 'null' || value == undefined) return '../image/yisheng.png';
      return `https://${sessionStorage.getItem('hospitalDomainname')}/doctor${value}`;
    },
  },
  methods: {
    async getDocInfo() {
      const DATA = {
        rowsperpage: '10',
        page: '1',
        keywords: this.doctorKey,
        docid: `${this.$route.query.docid}`,
      };

      await this.tq.getDoctoList(DATA, this).then((ts) => {

        console.info(JSON.stringify(ts));
        
        //判断是否未登录
        if (ts.d.errCode && ts.d.errCode == '101') {
          this.$router.push('/');
          return;
        }

        this.docList = ts.d.DATAOBJ.DATA;
        this.doctorInfo = this.docList[0];

        
        // alert('doctorInfo: ' + JSON.stringify(this.doctorInfo));
        
      })
      
    },

    queren(id) {
      const querenmes = window.confirm('是否确认收货？');
      if (querenmes == true) {
        const res = JSON.stringify({
          OTRequest: {
            VERSION: '1.0',
            TN: 'F27.APP.02.29',
            CLIENTID: 'YLAPP',
            RYBID: 'PAT',
            TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
            DATA: { orderId: id },
          },
        });
        this.spost(this.ts, '/doctor/AppMainServlet.ap', {
          '': res,
        }).then(() => {
          /*           this.showAlert = true;
          this.alertText = '确认成功'; */
          this.$messagebox('确认成功');
          this.page = 1;
          this.getyaofang(false);
        });
      }
    },
    deletePay(id) {
      const Mes2 = window.confirm('是否删除订单？');
      if (Mes2) {
        const res = JSON.stringify({
          OTRequest: {
            VERSION: '1.0',
            TN: 'F27.APP.02.24',
            CLIENTID: 'YLAPP',
            RYBID: 'PAT',
            TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
            DATA: { orderId: id, ordstatus: '1' },
          },
        });
        this.spost(this.ts, '/doctor/AppMainServlet.ap', {
          '': res,
        }).then((ts) => {
          // this.list1.splice(0, 1);
          // 重新获取列表
          this.getyaofangClick(false);
          this.$messagebox('删除成功');
        });
      }
    },
    Fold(index) {
      this.isFold.splice(index, 1, !this.isFold[index]);
    },
    loadMoreLm() {
      this.busyLm = true;
      setTimeout(() => {
        this.lmpage += 1;
        this.getDayActivities(true);
      }, 500);
    },
    loadMore() {
      this.busy = true;
      setTimeout(() => {
        this.page += 1;
        this.getyaofang(true);
      }, 500);
    },
    goDetail(item) {
      const Mes = window.confirm('是否查看订单详情？');
      if (Mes == true) {
        if (item.ORDSTATUS == '0') {
          this.$router.push({
            name: '/chufang/nonePayment',
            query: {
              fs: item.FS,
              orderId: item.ORDID,
              doctorname: item.DOCTORNAME,
              yaofangname: item.DURGSTORENAME,
              yaofangadr: item.DURGSTOREADDR,
              yaofangphone: item.DURGSTOREPHONE,
              acsm: item.ACSM,
              yff: item.PRESCRIBEUNITPRICE,
              jgf: item.JGF,
              psf: item.PSF,
              druglist: item.DURGSLIST,
              leavemes: item.ORDERLEAVEMESSAGE,
              oprlb: item.OPRLB,
            },
          });
        } else if (item.ORDSTATUS == '3') {
          this.$router.push({
            name: '/chufang/unship',
            query: {
              doctorname: item.DOCTORNAME,
              kuaidiname: item.SHR,
              kuaidiphone: item.SHRMOBILE,
              yaofangname: item.DURGSTORENAME,
              yaofangadr: item.DURGSTOREADDR,
              acsm: item.ACSM,
              yaofangphone: item.DURGSTOREPHONE,
              syr: item.SHR,
              syrdh: item.SHRMOBILE,
              draglist: item.DURGSLIST,
              status: item.ORDSTATUS,
              shadr: item.SHADDRESS,
              leavemes: item.ORDERLEAVEMESSAGE,
              yff: item.PRESCRIBEUNITPRICE,
              jgf: item.JGF,
              psf: item.PSF,
              oprlb: item.OPRLB,
            },
          });
        } else if (item.ORDSTATUS == '4') {
          this.$router.push({
            name: '/chufang/prescribeOrderDetail',
            query: {
              doctorname: item.DOCTORNAME,
              kuaidiname: item.SHR,
              kuaidiphone: item.SHRMOBILE,
              yaofangname: item.DURGSTORENAME,
              yaofangadr: item.DURGSTOREADDR,
              ordercode: item.ORDERCODE,
              yaofangphone: item.DURGSTOREPHONE,
              syr: item.SHR,
              syrdh: item.SHRMOBILE,
              draglist: item.DURGSLIST,
              orderstatus: item.ORDSTATUS,
              shadr: item.SHADDRESS,
              yff: item.PRESCRIBEUNITPRICE,
              jgf: item.JGF,
              psf: item.PSF,
              leavemes: item.ORDERLEAVEMESSAGE,
              time: item.OPENTIME,
              acsm: item.ACSM,
              fktime: item.FKTIME,
              delivertime: item.DELIVERTIME,
              kdmc: item.KDMC,
              kdno: item.KDNO,
              kdmcvalue: item.KDMCVALUE,
              oprlb: item.OPRLB,
            },
          });
        } else if (item.ORDSTATUS == '5') {
          this.$router.push({
            name: '/chufang/prescribeOrderDetail',
            query: {
              doctorname: item.DOCTORNAME,
              kuaidiname: item.SHR,
              kuaidiphone: item.SHRMOBILE,
              yaofangname: item.DURGSTORENAME,
              yaofangadr: item.DURGSTOREADDR,
              yaofangphone: item.DURGSTOREPHONE,
              syr: item.SHR,
              syrdh: item.SHRMOBILE,
              draglist: item.DURGSLIST,
              status: item.ORDSTATUS,
              shadr: item.SHADDRESS,
              leavemes: item.ORDERLEAVEMESSAGE,
              acsm: item.ACSM,
              yff: item.PRESCRIBEUNITPRICE,
              jgf: item.JGF,
              psf: item.PSF,
              oprlb: item.OPRLB,
            },
          });
        }
      }
    },
    checkMedic(id, item) {
      const Mes1 = window.confirm('是否查看药方详情？');
      if (Mes1 == true) {
        const res = JSON.stringify({
          OTRequest: {
            VERSION: '1.0',
            TN: 'F27.APP.02.34',
            CLIENTID: 'YLAPP',
            RYBID: 'PAT',
            TOKEN: `${sessionStorage.getItem('rybToken')}`,
            DATA: { acno: id },
          },
        });
        this.spost(this.ts, '/doctor/AppMainServlet.ap', {
          '': res,
        }).then(() => {
          this.checkACNO = id;
          this.$router.push({
            name: '/chufang/nonePayment',
            query: {
              fs: item.FS,
              orderId: item.ORDID,
              doctorname: item.DOCTORNAME,
              yaofangname: item.DURGSTORENAME,
              yaofangadr: item.DURGSTOREADDR,
              yaofangphone: item.DURGSTOREPHONE,
              draglist: item.DURGSLIST,
              acsm: item.ACSM,
              yff: item.PRESCRIBEUNITPRICE,
              jgf: item.JGF,
              psf: item.PSF,
              druglist: item.DURGSLIST,
              leavemes: item.ORDERLEAVEMESSAGE,
              oprlb: item.OPRLB,
            },
          });
        });
      }
    },
    submitLiuyan() {
      /*
        判断是否输入留言内容
      */
      if (this.inputValue.replace(/(^\s*)|(\s*$)/g, '') == '' || this.inputValue == '') {
        this.$messagebox('提示', '请输入内容！');
        return false;
      }

      const date = new Date();
      const y = date.getFullYear();
      let m = date.getMonth() + 1;
      const hour = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
      const minute = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
      const second = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();

      const res = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.02.21',
          CLIENTID: 'YLAPP',
          RYBID: 'PAT',
          TOKEN: `${sessionStorage.getItem('rybToken')}`,
          DATA: {
            patientId: this.patientInfo.patid, // 测试数据，实际数据由用户选择患者
            doctorId: this.doctorInfo.DOCTORID,
            leaveMessage: this.inputValue,
            flag: '1',
          },
        },
      });

      m = m < 10 ? `0${m}` : m;
      let d = date.getDate();
      d = d < 10 ? `0${d}` : d;
      const Newdate = `${`${y}-${m}-${d}` + ' '}${hour}:${minute}:${second}`;

      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': res,
      }).then((ts) => {


/*         this.list.push({
          LEAVETIME: Newdate,
          WHOSE: '1',
          NAME:this.patientInfo.username,
          LEAVEMESSAGE: this.inputValue,
        }); */


        this.getDayActivitiesClick(false);
        this.inputValue = '';
      });
    },
    getyaofangClick(flag) {
      this.list1 = [];
      this.page = 1;
      this.getyaofang(flag);
    },
    getyaofang(flag) {
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.02.36', // 02.36
          CLIENTID: 'YLAPP',
          RYBID: 'PAT',
          TOKEN: `${sessionStorage.getItem('rybToken')}`,
          DATA: {
            keywords: this.recordKey,
            patientId: this.patientInfo.PATIENT_ID, // 测试数据，实际数据由用户选择患者
            doctorId: this.doctorInfo.DOCTORID,
            rowsperpage: '10',
            page: `${this.page}`,
            ordercolumn: 'opentime',
            ordertype: 'desc',
          },
        },
      });
      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req,
      }).then((ts) => {
        // this.list1 = ts.d.DATAOBJ.DATA;
        for (let i = 0; i < ts.d.DATAOBJ.DATA.length; i += 1) {
          this.isFold.push(true);
        }
        if (flag) {
          this.list1 = this.list1.concat(ts.d.DATAOBJ.DATA);
          if (this.list1.OPENTIME == this.list1.CURTIME) {
            this.ishidelist1 = true;
          } else {
            this.ishidelist1 = false;
          }
          if (ts.d.DATAOBJ.DATA.length == 0) {
            this.busy = true;
            this.loadingText = '没有更多数据';
          } else {
            this.busy = false;
            this.loadingText = '加载中...';
          }
        } else {
          this.list1 = [];
          this.list1 = ts.d.DATAOBJ.DATA;
          this.busy = false;
        }
      });
    },
    getDayActivitiesClick(flag) {
      this.list = [];
      this.lmpage = 1;
      this.getDayActivities(flag);
    },
    getDayActivities(flag) {
      // this.curDay = day;
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.02.19',
          CLIENTID: 'YLAPP',
          RYBID: 'PAT',
          TOKEN: `${sessionStorage.getItem('rybToken')}`,
          DATA: {
            patientId: this.patientInfo.patid, // 测试数据，实际数据由用户选择患者
            doctorId: this.doctorInfo.DOCTORID,
            rowsperpage: '10',
            page: `${this.lmpage}`,
            ordercolumn: 'leavetime',
            ordertype: 'asc',
          },
        },
      });

      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req,
      }).then((ts) => {
        // this.list = ts.d.DATAOBJ.DATA.reverse();


        // for (let i = 0; i < ts.d.DATAOBJ.DATA.length; i += 1) {
        //  this.isFold.push(true);
        // }
        if (flag) {
          this.list = this.list.concat(ts.d.DATAOBJ.DATA);
          /*           if (this.list.OPENTIME == this.list.CURTIME) {
            this.ishidelist1 = true;
          } else {
            this.ishidelist1 = false;
          } */
          if (ts.d.DATAOBJ.DATA.length == 0) {
            this.busyLm = true;
            this.loadingTextLm = '没有更多留言';
          } else {
            this.busyLm = false;
            this.loadingTextLm = '加载中...';
          }
        } else {
          this.list = {};
          this.list = ts.d.DATAOBJ.DATA;
          this.busyLm = false;
        }
      });
    },
  },
};
</script>
<style scoped>
.loadingTLm{
  text-align: center;
  color: #ccc;
  font-size: .8rem;
  margin-top: 1rem;
}
.loadingT{
  text-align: center;
  color: #ccc;
  font-size: .8rem;
}
.c_patient_info{
  float: right;
  vertical-align: middle;
  font-size: .8rem;
  /* margin: 1rem 3rem 0rem 0rem; */
  background-color: #fff;
  -webkit-box-shadow:0px 0px 10px #c8c8c8 ;
  -moz-box-shadow:0px 0px 10px #c8c8c8 ;
  box-shadow: 0px 0px 10px #c8c8c8;
  width: 5rem;
  border-radius: 10px;
  line-height: 1.5rem;
  text-align: center;
  color: #666;
}
.c_contentt {
  /* background: #fff; */
  padding-top: .1rem;
}
.c_patient {
  /* border-bottom: 1px solid #ddd; */
  /* padding: 0.5rem .5rem; */
  display: inline-block;
  padding-left: .5rem;
}
.c_patient_p {
  margin-top: 1rem;
  font-size: 1rem;
  font-family: "Microsoft Yahei";
  color: #333;
  margin: 0.2rem;
  line-height: 1.5rem;
}
.c_patient_p1 {
  margin-top: 1rem;
  font-size: 0.8rem;
  font-family: "Microsoft Yahei";
  color: #ccc;
  margin: 0.2rem;
}
.c_patient_img {
  display: inline-block;
  vertical-align: bottom;
  border-radius: 50%;
  width: 2.5rem;
  height: 3rem;
  margin-left: .5rem;
}
.c_patient_img img{
  width: 2.5rem;
  border-radius: .5rem;
}
.c_nav {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 0.6rem;
  border-bottom: 1px solid #ebebeb;
  font-size: .8rem;
}
.c_nav div {
  flex: 1;
  text-align: center;
}
.c_nav span {
  padding: 0.2rem;
  color: #666;
  font-family: "Microsoft Yahei";
}
.c_nav_active {
  border-bottom: 2px solid #3190e8;
}
.bingli {
  padding: 7rem 0.5rem 0 0.5rem;
  /* margin-top: 4.9rem; */
  /* background: #fff; */
}
.bingli_con {
  line-height: 0.8rem;
  border: 1px solid #f1f1f1;
  margin: 0.5rem 0;
  background: #fff;
  border-radius: 10px;
  padding: 1rem;
}
.bingli_con p {
  font-size: 0.9rem;
  padding: 0.2rem;
  line-height: 1rem;
  margin-bottom: 0.4rem;
}
.bingli_con p:last-child{
  line-height: 1rem;
}
.bingli_time {
  float: right;
  font-size: 0.9rem;
  font-weight: normal;
  color: rgb(54, 207, 161);
  font-family: "Microsoft Yahei";
}
.liuyan {
  overflow:hidden;
  /* background-color: #fff; */
  padding-bottom: 3rem;
  padding-top: 6rem;
  /* margin-bottom: 3rem; */
}
.liuyan_con div{
/*   display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center; */
}/*
.doctorposition{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
} */
/* .patientposition{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-content: center;
  border: 1px solid red;
} */
.liuyan .patient {
  background-color: #d0d8e0;  /* b0edf5 */
  float: right;
  margin: 1rem;
  padding: 0.6rem;
  font-size: 0.8rem;
  margin-bottom: 0;
  width: 60%;
  word-break: break-all;
  border-radius: 15px;
}
.liuyan .doctor {
  background-color: rgba(196, 204, 204, 0.466);
  float: left;
  margin: 1rem;
  padding: .5rem 1rem .5rem 1rem;
  font-size: 0.8rem;
  font-family: "Microsoft Yahei";
  margin-bottom: 0;
  width: 60%;
  word-break: break-all;
  border-radius: 10px;
  color: #444;

}
.medic{
  background-color:#fff;
  float: left;
  margin: 1rem;
  padding: 0.8rem;
  font-family: "Microsoft Yahei";
  margin-bottom: 0;
  width: 80%;
  word-break: break-all;
  font-size: 0.9rem;
  border: 1px solid #f1f1f1;
  box-shadow:2px 2px 6px #f1f1f1;
}
.medic p{
  margin-bottom: 0.3rem;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap
}
.medic .medic_money{
  color: rgb(209, 189, 6);
}
.medic_i i{
  font-size: 2rem;
  color: #3190e8;
  float: left;
  padding: 0.4rem;
  line-height: 1;
}
.medic_check{
  border-top: 1px solid #f1f1f1;
  text-align: right;
  margin-top: 1rem;
  line-height: 1rem;
  padding: 0.5rem 0.5rem 0 0;
  color: #3190e8;
}
.medic_check span:first-child{
  float: left;
  color: #ccc;
}
.liuyan_time {
  font-size: 0.6rem;
  display: block;
  color: #aaa;
  padding-bottom: .3rem;
}
.inputMessage {
  outline: none;
  padding:0.5rem 0;
  width: 80%;
  border: none;
  font-size: 0.9rem;
  font-family: "Microsoft Yahei";
}
.buttonMessage {
  outline: none;
  width: 20%;
  padding:0.2rem 0;
  border: none;
  background: #3190e8;
  color:#fff;
  font-size: .8rem;
  letter-spacing: .2rem;
  border-radius: 10px;
}
.huifu {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 99;
  overflow: hidden;
  border-top: 1px solid #f1f1f1;
  padding-left: .5rem;
  padding-right: .5rem;
  background: #fff;
}
.ischeckmedic{
  background: #f1f1f1;
}
.isfold{
  max-height: 3rem;
  overflow: hidden;
}
.patient_question {
  background: #3190e8;
  float: right;
  color: #fff;
  padding: 0.2rem 1.2rem;
}
</style>

